When you complete this 
chapter, you will be able 
to: 


e Understand principles for 
type design on a Web site 

one te PONT clemett Type creates a strong recurring theme throughout a well-designed Web site. 

e Understand why you 
should use Cascading 
Style Sheet (CSS) instead set in type. The consistent use of type provides valuable information cues to the 
of the <FONT> element 


Everyone visiting your Web site is a reader and responds instinctively to words 


reader, and recent innovations provide powerful tools for working with type. Until 
e Create style rules using ; 

the CSS language recently, ARA POTADA opor varny to use too many <FONT> tags and lots of 
e Selectively apply CSS text as graphics. Today, Cascading Style Sheets offer a potent style language, 


style rules allowing you to manipulate a variety of text properties to achieve professional, 


e Specify CSS font proper- effective results, all without resorting to graphics that add download time. 
ties and block-level 
space values 


e Build and apply style 
classes 
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TYPE DESIGN PRINCIPLES 


TIP 


Type Terminology 

In strict typography 
terms, a typeface is 
the name of the type, 
such as Times New 
Roman or Futura 
Condensed. A font is 
the typeface in a par- 
ticular size, such as 


Times Roman 24 point. 


For the most part, in 
HTML the two terms 
are interchangeable. 


Type is a flexible medium that can express emotion, tone, and structure based 
on the type choices you make. You also can go overboard by using too many 
faces and sizes, ending up with a ransom note look characteristic of the early 
days of page layout programs. Just because you have 150 typefaces at your dis- 
posal does not mean you should use them all. Designing for the Web actually 
restricts your type choices because you must stick with fonts that your users 
have installed on their computers. If you specify a font that is not available, the 
browser substitutes the default font. 

As you work with type, consider the following principles for creating an 
effective design: 


e Choose fewer fonts and sizes 
e Use available fonts 

e Design for legibility 

e Avoid using text as graphics 


CHOOSE FEWER FONTS AND SIZES 

Your pages look cleaner when you choose fewer fonts and sizes of type. Decide 
on a font for each different level of topic importance, such as page headings, 
section headings, and body text. Communicate the hierarchy of information 
with changes in the size, weight, or color of the typeface. For example, a page 
heading should have a larger, bolder type, while a section heading would appear 
in the same typeface, only lighter or smaller. 

Pick a few sizes and weights in a type family. For example, you might 
choose three sizes, such as 24 point for headings, 18 point for subheadings, and 
12 point for body text. (CSS lets you specify point sizes.) You can vary these 
styles by changing the weight; for example, 12-point bold type can be used for 
topic headings within text. Consistently apply the same fonts and the same 
combination of styles throughout your Web site.Avoid making random changes 
in your use of type conventions because consistency develops a strong visual 
identity on your pages. The New York Times Web site (Figure 6-1) creates a 
strong visual identity by consistently using three typefaces: one for its logo, 
another for headings, and the browser’s default typeface for body text. 


FIGURE 6-1 
Strong text identity 


Instantly 
familiar banner 


Same font for 
headlines and 
navigation in 
different sizes 


Headlines use 
text as graphics 


Web Typography // 4 


yy The New York Times on the Web - Netscape |. (Of xi 
File Edit View Go Communicator Help 

7| Back Foward Reload Home Search Netscape Print Security Stop y 
Ky Bookmarks “i Netsite: |http://www.nytimes.com/ 


Everything yow-nee 
to know in New York 
tomorrow... 
Body text is 
browser default 


UEA For Fourth Time in 17 Months, 


Yeltsin Fires Russian Premier 


President Boris Yeltsin sacked Prime Minister 
Sergei Stepashin and his Cabinet on Monday, 
touching off a political crisis as two key 
elections approach. Go to Article 


$ Caption text is same as 
body, one size smaller 


. (AP) 
Starr Plans to Finish Report | President Clinton wamed the 


ivi z e nation's governors, including Gov. 
‘Automobiles Prior to the 2000 Elections Jesse Ventuen Gf Mlinhasote the! 


Books Independent counsel Kenneth Starr said on the Republican tax cut would force 
CarecrPath Monday he is moving to conclude his drastic putbacke = hutt the tha 


[Document: Done -3 ma a 3P EAZ Z 


USE AVAILABLE FONTS 


Fonts often are a problem in HTML because font information is client-based. The 
user’s browser and operating system determine how a font is displayed, or if it is 
displayed at all. If you design your pages using a font that your user does not have 
installed, the browser defaults to Times on a Macintosh or Times New Roman on 
a PC. To make matters worse, even the most widely available fonts appear in dif- 
ferent sizes on different operating systems. Unfortunately, the best you can do 
about this is to test on multiple platforms to judge the affect on your pages. 

To control how text appears on your pages more effectively, think in terms 
of font families, such as serif and sans-serif typefaces (Figure 6-2), rather than spe- 
cific styles. Because of the variable nature of fonts installed on different com- 
puters, you never can be sure the user will see the exact font you have specified. 
You can, however, specify font substitution attributes (described later in this 
chapter). These attributes let you specify a variety of fonts within a font family, 
such as the common sans-serif fonts, Arial or Helvetica. 


42 // Chapter 6 


FIGURE 6-2 


Serif and 
sans-serif type 


TABLE 6-1 


Common installed 
fonts 


TIP 


You can download a 
package of Web fonts 
from Microsoft at 
www. microsoft.com/ 
typography/fontpack/ 
default.htm. The core 
fonts package 
includes Arial, 
Verdana, and a num- 
ber of other fonts 
designed specifically 
for the Web. 


A A 


Serif Sans-Serif 


Serif, a fine line that 
finishes off the main 
strokes of a letter 


Table 6-1 lists the most common fonts on the PC, UNIX, and Macintosh systems. 


Common PC fonts Common UNIX fonts Common Macintosh fonts 
Arial Helvetica Helvetica 
Courier New Times Courier 
Times New Roman Palatino 
Verdana Times 
Verdana 
Arial 


The table shows that Times (or Times New Roman) is available on all three 
operating systems. It is the default browser font. Courier is the default mono- 
space font. Arial or Helvetica are the default sans-serif fonts. Arial and Verdana 
come with Internet Explorer 4.0 and up,so many Macintosh and PC users have 
these fonts installed. Some Macintosh users only have Helvetica, so it is a good 
idea to specify this font as an alternate choice when you are using sans-serif 
fonts. 


DESIGN FOR LEGIBILITY 
Figures 6-3 through 6-5 show the same paragraph in Times, Arial, and Verdana at 
the default browser size. 


FIGURE 6-3 
Default size Times 


FIGURE 6-4 
Default size Arial 
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AWA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 

| File Edt View Favorites Tools Help | 

| Back ~ > - @ E A| QSearch (Favorites CPristoy | & WF ~ 

[ädaes | P Go 


It was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. The 
air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, and there 
were no people, no wagons, there was no stir of life, nothing going on. The road was mainly a 
winding path with hoof-prints in it, and now and then a faint trace of wheels on either side in the 
grass -- wheels that apparently had a tire as broad as one's hand. 


I 
Elbos amy Computer A 


AWA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 

| Ele Edit View Favorites Tools Help | 

| &bak = > -Q fa} | QSearch [Favorites CBistoy | & W ~ 
[Addes eeo 


twas a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as 
Sunday. The air was full of the smell of flowers, and the buzzing of insects, and the 
twittering of birds, and there were no people, no wagons, there was no stir of life, 
nothing going on. The road was mainly a winding path with hoof-prints in it, and now 
and then a faint trace of wheels on either side in the grass -- wheels that apparently 
had a tire as broad as one's hand. 


H 


yD O l Be 
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FIGURE 6-5 
Default size Verdana 


AWA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| Ele Edit View Favorites Tools Help e | 
| Back ~ > » O E) A| Qseach Favorites Bristoy | BH BF ~ 
| Address | ~] @Go 


It was a soft, reposeful summer landscape, as lovely as a dream, and 
as lonesome as Sunday. The air was full of the smell of flowers, and 
the buzzing of insects, and the twittering of birds, and there were no 
people, no wagons, there was no stir of life, nothing going on. The 
road was mainly a winding path with hoof-prints in it, and now and 
then a faint trace of wheels on either side in the grass -- wheels that 
apparently had a tire as broad as one's hand. 


lÆ] Done {| |) My Computer 7 


In these three examples, where the text wraps at the end of each line 
depends on the font. Because its x height (the height of the letter x in the font) 
is smaller than that of other fonts,Times as the default size can be hard to read, 
even though it is a serif typeface. Some find Arial more legible online. Verdana 
is an expanded font—each letter takes up more horizontal space than Arial or 
Times. This makes the text easier to read online, but takes much more space on 
the page. 

The size and face of the type you use on your pages determine the legibil- 
ity of your text. The computer screen has a lower resolution than the printed 
page, compounding the difficulty of reading online. Fonts that are legible on 
paper can be more difficult to read on screen. Keep fonts big enough to be leg- 
ible and avoid specialty fonts that degrade when viewed online. To aid the 
reader, add more white space to the page around your blocks of text. Consider 
using more white space between lines as well. Test your content with both serif 
and sans-serif body text. Finally, make sure that you provide enough contrast 
between your text color and the background color. In general, darker text on a 
light background is easiest to read. 


AVOID USING TEXT AS GRAPHICS 

If you must use a specific font, create text as a graphic. Using Adobe Photoshop 
or another graphics program, create text and save it as either a GIF or JPG file. 
(See Chapter 7 for more information on these file formats.) This technique 
allows you to add drop shadows and other effects to your text. Because you also 
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are adding download overhead with every additional graphic, however, save 
text graphics for important purposes, such as the main logo for your page or for 
reusable navigation graphics. Remember that including text as graphics means 
users cannot search for that text. Whenever possible, use HTML-styled text on 
your pages. 


CONTROLLING TYPOGRAPHY WITH THE <FONT> ELEMENT 


Until the addition of the <FONT> element in HTML 3.2,an HTML author could 
do little to control type display on a Web page.This is because HTML is intended 
to express document structure only, not document style. The <FONT> element, 
although simplistic in its control over text display, allows HTML authors to 
choose the font, color, and size of their type. 

In the HTML 3.2 specification, the World Wide Web Consortium (W3C) cau- 
tioned that the <FONT> element may not be included in future versions of 
HTML. With HTML 4.0, the <FONT> element has been deprecated in favor of 
CSS.To ensure forward compatibility with all browsers, move to CSS and limit 
or replace the <FONT> element in your code. Currently, however, the <FONT> 
element still is widely used on the Web and supported by browsers. You can use 
it to set font size, font color, and to specify font substitution. 


SETTING FONT SIZE 

Use the SIZE attribute to set the font size.The range of sizes is one to seven, with 
three being the default. Size one is the smallest and size seven is the largest. The 
sizes are relative to the default browser size. The following code sets the font 
size to Six: 


<FONT SIZE=6>Some text</FONT> 


You also can set sizes relative to the default base font using the plus (+) or 
minus (-) signs. Setting SIZE=+2 results in a font two sizes larger than the 
default (size three). The following code sets the size to six: 


<FONT SIZE=+3>Some text</FONT> 


This SIZE attribute expresses default size three plus three. 


SPECIFYING FONT ALTERNATES 

To control which fonts browsers use, you can include a list of alternate fonts, 
forcing the browser to look for matching fonts installed on the user’s machine. 
Specify alternate fonts in the <FONT> element by listing a string of fonts within 
quotes in the FACE attribute. For example, the following statement tells the 
browser to display the text in Arial. If Arial is not available, the browser attempts 
to use Helvetica. If neither is available, the text appears in the browser default 
font, usually Times New Roman. 


<FONT SIZE=6 FACE="ARIAL, HELVETICA">some text</FONT> 
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FIGURE 6-6 


Text formatted with 
<FONT> element 


SETTING FONT COLOR 

You can set font color with the COLOR attribute, using either a color name or 
hexadecimal color code. (See Chapter 7 for more information on hexadecimal 
color codes.) 


<FONT SIZE=6 FACE="ARIAL, HELVETICA" COLOR=RED>some 
text</FONT> 


USING THE <FONT> ELEMENT 
Figure 6-6 shows how the <FONT> element formats the type size, face, and 
color of text on the Web page. 


AWA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 
| File Edit View Favorites Tools Help Ea 
| Back ~ > ~- O R | QSearch (Favorites Chiston | & WF ~ 

[Adae E o wa ZD @Go 


from A Connecticut Yankee in King Arthur's Court by Mark Twain 


Chapter 1 


The Tale of the Lost Land: Camelot 


"CAMELOT -- Camelot," said | to myself. "| don't seem to remember hearing of it 
before. Name of the asylum, likely." 


twas a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as 
Sunday. The air was full of the smell of flowers, and the buzzing of insects, and the 
twittering of birds, and there were no people, no wagons, there was no stir of life, 
nothing going on. The road was mainly a winding path with hoof-prints in it, and now 
and then a faint trace of wheels on either side in the grass -- wheels that apparently 
had a tire as broad as one's hand. 


IÆ] Done | | [Æ My Computer A 


The following code shows the syntax of the <FONT> element. 

<HTML> 

<HEAD> 

<TITLE> A Connecticut Yankee in King Arthur’s Court by Mark Twain 
</TITLE> 

</HEAD> 

<BODY> 


<DIV ALIGN=RIGHT> 

from <I>A Connecticut Yankee in King Arthur's Court</I> by 
Mark Twain</DIVv> 

<HR> 

<FONT SIZE=5 COLOR=GRAY>Chapter 1</FONT> <BR> 
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<FONT SIZE=6>The Tale of the Lost Land: Camelot</FONT> 
<FONT FACE=ARIAL><P> 

"CAMELOT — Camelot," said I to myself. "I don't seem to 
remember hearing of it before. Name of the asylum, 
likely." 

</P> 

<P> 

It was a soft, reposeful summer landscape, as lovely as 
a dream, and as lonesome as Sunday. The air was full of 
the smell of flowers, and the buzzing of insects, and 
the twittering of birds, and there were no people, no 
wagons, there was no stir of life, nothing going on. The 
road was mainly a winding path with hoof-prints in it, 
and now and then a faint trace of wheels on either side 
in the grass — wheels that apparently had a tire as 
broad as one's hand. 

</P> 

</FONT> 

</BODY> 

</HTML> 


CONTROLLING TYPOGRAPHY WITH CASCADING STYLE SHEETS 


This section acquaints you with the CSS properties that affect how type appears 
in the browser.This is not meant to be a complete CSS lesson, but rather a typog- 
raphy-oriented look at the benefits of using Cascading Style Sheets. 

Cascading Style Sheets offer much greater control over type characteristics 
than does the <FONT> element. You can use standard type conventions, such 
as using point or pixel sizes, setting leading, and specifying indents and align- 
ment. You gain more control with much less code. For example, suppose that 
you want every <H1> element on your Web site to be green and centered. Using 
the <FONT> element, you need the following code for every instance of the 
<H1> element: 


<H1 ALIGN=CENTER><FONT COLOR=GREEN>The Heading</FONT></H1> 


With Cascading Style Sheets you can express this style information once as 
a rule in a style sheet: 


H1 {COLOR:GREEN; TEXT-ALIGN:CENTER} 
This style rule affects every <H1> element on any page that uses the Cascading 
Style Sheet. 


CSS BASICS 
CSS is based on rules that select an HTML element and declare style character- 
istics for the element. You can state sets of rules, known as style sheets, in the 
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FIGURE 6-7 
Style rule syntax 


FIGURE 6-8 


Property declaration 
syntax 


head section of an HTML document or include them in a separate document 
known as an external style sheet. Use external style sheets to set rules when 
working with a number of HTML documents. 


Understanding Style Rules 

Style sheet rules are easy to interpret. The following style sheet shows a simple 
style rule for the <P> element. Note that the style rules are contained in the 
<STYLE> element in the document’s <HEAD> section: 


<HEAD> 

<TITLE>Sample Document</TITLE> 
<STYLE> 

P {COLOR: BLUE; FONT-SIZE: 24pt} 
</STYLE> 

</HEAD> 


This rule sets all <P> elements in the document to blue 24-point text. 

Style rules are composed of two parts: a selector and a declaration. The 
selector determines the element to which the rule is applied. The declaration 
details the exact property values. Figure 6-7 is an example of a simple rule. 


H1 {COLOR: RED} 


This rule forces the browser to display all <H1> headings in red. 

The declaration contains a property and a value (Figure 6-8).The property is a 
quality or characteristic.The precise specification of the property is contained in 
the value. CSS includes over 50 properties, each with a specific number of values. 


H1 {COLOR: RED} 


You must include all CSS rules within a <STYLE> element or define them 
using a STYLE attribute. The <STYLE> element always is contained in the 
<HEAD> section. To add the above rule to an entire HTML document, use the 
following code in the <HEAD> section of the document: 


<HEAD> 

<TITLE>Sample Document</TITLE> 
<STYLE TYPE="text/css"> 

H1 {COLOR: RED} 

</STYLE> 

</HEAD> 


In the above code, note the TYPE attribute to the <STYLE> element. This 
defines the style language as Cascading Style Sheets. 


TIP 


Check out 
WebReview's CSS 
master list at www. 
webreview.com/wr/ 
pub/guides/style/ 
mastergrid.html. This 
site allows you to look 
up quickly any CSS 
property and check its 
support in a variety of 
browsers. 
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Alternately, you can define the style for a single <H1> element using the 
STYLE attribute: 


<H1 STYLE="COLOR: BLUE">Some Text</H1> 


You generally would use the STYLE attribute to override a style that was set 
at a higher level in the document. 


Linking to an External Style Sheet 

Placing style sheets in an external document lets you specify rules for different 
HTML documents. This is an easy and powerful way to use style sheets.An exter- 
nal style sheet is a text document with a .CSS extension that contains the style 
rules. Here is an example of a simple external style sheet named style1.css: 


/* StyleSheet #1 */ 

BODY {COLOR: RED} 

H1 {COLOR: GREEN} 

H2 {COLOR: GREEN; BORDER: SOLID BLUE} 


eM 


Notice that the CSS comment line begins with the characters "/*" and ends 
with the characters '*/".The style sheet file contains no HTML code, only CSS 
style rules. 

To link to this external style sheet, add the <LINK> element within the head 
section of any HTML file as shown in the following code: 


<HEAD> 

<TITLE>Sample Document</TITLE> 

<LINK HREF="stylel.css" REL="stylesheet"> 
</HEAD> 


The file containing this code displays with the characteristics specified by 
the style sheet. The HREF attribute specifies the URL of the style sheet and all 
relative file location rules apply. The REL attribute specifies the relationship 
between the linked and current documents.All pages that are linked to this style 
sheet display the style rules. The advantage of the external style sheet is that you 
only have to change the style rules in one document to affect all the pages on 
a Web site. 


Solving Problems with Style Sheets 

The main problem with style sheets is browser support. Currently Internet 
Explorer 5.0 is the leader in style sheet support, but still does not support the 
specification completely. Netscape Navigator 4.x is far behind in CSS support, 
but the next release promises better CSS capabilities. Strange results appear 
when browsers cannot interpret the rules properly. See Figures 2-1 and 2-2 for 
examples. Finally, older browsers will not be able to interpret your CSS rules at 
all. Test carefully to make sure you can live with the results if your rules are 
ignored. 
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CSS SELECTION TECHNIQUES 

You must apply the style rules you build to the elements in the document.The 
power in CSS comes from the different methods of selecting elements. You can 
choose from a variety of selection methods including: 


e Selecting multiple elements 
e Selecting by context 
e Selecting with the CLASS attribute 


More complex selection involves the creation of artificial divisions, using 
two elements designed expressly for CSS: 


e <DIV> - Block Division 
e <SPAN> - Inline Division 


The use of these elements, in combination with the CLASS attribute, effec- 
tively allow you to create entirely new HTML elements that are specific to your 
working environment. You then can use these techniques in external style 
sheets to apply your style properties across multiple documents in a Web site 
or other HTML-based application. 


Selecting Multiple Elements 

Using multiple selectors lets you use less code to accomplish the same results. 
For example, to make both <H1> and <H2> headings green, you could use the 
following rules: 


<STYLE TYPE="text/css"> 
H1 {COLOR: GREEN} 

H2 {COLOR: GREEN} 
</STYLE> 


These two rules can be expressed in a single rule statement using multiple 
selectors for the same property. Multiple selectors must be separated by commas: 


<STYLE TYPE="text/css"> 
H1, H2 {COLOR: GREEN} 
</STYLE> 


Selecting by Context 
A context-based selector lets you specify the exact context in which a style is 
applied. To specify that <I> elements appear blue only within <H1> elements, 
use the following rule: 


<STYLE TYPE="text/css"> 
H1 I {COLOR: BLUE} 
</STYLE> 


This rule states that <I> elements appear blue only when they occur within 
an <H1> element. 


FIGURE 6-9 
Class syntax 
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Selecting with the CLASS Attribute 
The CLASS attribute lets you write rules and then apply them to groups of ele- 
ments that you have classified. Basically, the CLASS attribute lets you define your 
own tags and then apply them anywhere you want. 

To create a class, first declare it within the <STYLE> element. The period (.) 
flag character indicates that the selector is a class selector. Figure 6-9 is an exam- 
ple of a rule with a class selector. 


-QUOTE {COLOR: RED} 


Place this rule in the <STYLE> element: 


<STYLE TYPE="text/css"> 
-QUOTE {COLOR: RED} 
</STYLE> 


Next, use the CLASS attribute in the document. In the following example, 
the code defines the <P> element as a special class named quote. 


<P CLASS="QUOTE">Some text</P> 


The selected paragraph will display the style properties of the quote class. 
In this example, the text color of the paragraph is red. 


Working with the <DIV> Element 
The <DIV> element lets you specify logical divisions within a document that 
have their own name and style properties. <DIV> is a block-level element that 
contains a leading and trailing carriage return. You can use the <DIV> element 
with the CLASS attribute to create customized block-level elements. 

To create a division, first declare it within the <STYLE> element. The fol- 
lowing example specifies a division named INTRO as the selector for the rule: 


<STYLE TYPE="text/css"> 
DIV.INTRO {COLOR:RED} 
</STYLE> 


Next, specify the <DIV> element in the document, and then use the CLASS 
attribute to specify the exact type of division. In the following example, the 
code defines the <DIV> element as the special class named intro. 


<DIV CLASS="INTRO">Some text</DIV> 


Working with the <SPAN> Element 

The <SPAN> element lets you specify inline elements within a document that have 
their own name and style properties. Place inline elements within a line of text, like 
the <B> or <I> elements. You can use the <SPAN> element with the CLASS attribute 
to create customized inline elements and apply styles more accurately. 
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To create a span, first declare it within the <STYLE> element. The following 
example specifies a <SPAN> element named Logo as the selector for the rule: 


<STYLE TYPE="text/css"> 

SPAN.LOGO {COLOR: RED} 

</STYLE> 

Next, specify the <SPAN> element in the document, and then use the 
CLASS attribute to specify the exact type of <SPAN> element. In the following 
example the code defines the <SPAN> element as a special class named Logo. 
Note that <SPAN> is used within the line of text. 


Welcome to the <SPAN CLASS="LOGO">Wonder Software</SPAN> 
Web site. 


CSS FONT PROPERTIES 

CSS lets you control over 50 style properties. Support varies widely for these 
properties so always test your work carefully.The font properties you will work 
with most often include: 


e Font families and alternates 
e Font size 

e Font weight 

e Line height 

e Letter spacing 

e Text indent 

e Color 


Selecting a Specific Font Family and Alternates 

The font family property lets you specify any font or generic font family. The users 
must have the font installed on their computers, otherwise the browser uses the 
default font. The following rule specifies Arial as the font for the <P> element: 


<STYLE TYPE="text/css"> 
P {FONT-FAMILY: ARIAL} 
</STYLE> 


You can specify a list of alternate fonts by using commas as a separator. The 
browser attempts to load each successive font in the list. If no fonts match, the 
browser uses its default font. The following code tells the browser to use Arial. 
If Arial is not present, use Helvetica. 


<STYLE TYPE="text/css"> 
P {FONT-FAMILY: ARIAL, HELVETICA} 
</STYLE> 


TABLE 6-2 


CSS measurement 
units 
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You can add a generic name for greater portability across browsers and 
operating systems.The following code tells the browser to use a sans-serif font 
if Arial or Helvetica are not available. 


<STYLE TYPE="text/css"> 
P {FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF} 
</STYLE> 


You can use the following generic names for font families: 


e Serif 
e ~—- Sans-serif 
e Monospace 


If you do not specify any font family, the browser displays the default font. 


Specifying Font Size 
CSS offers a variety of measurement units. For example, to specify font size, you 
can use any of the measurement units shown in Table 6-2. 


Unit Code Abbreviation Description 
Centimeter cm Standard metric centimeter 
Em em The width of the capital M in the current font, 


usually the same as the font size 


EX ex The height of the letter x in the current font 

Inch in Standard U.S. inch 

Millimeter mm Standard metric millimeter 

Relative A font size relative to the base font size; for 
example, 150% equals one-and-one-half the base 
font size 

Pica pc Standard publishing unit equal to 12 points 

Pixel px The size of a pixel on the current screen 

Point point Standard publishing unit, with 72 points in an inch 


The following rule sets the <BLOCKQUOTE> element to 18-point Arial: 


<STYLE TYPE="text/css"> 
BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt} 
</STYLE> 


Figure 6-10 shows the results of the style rule. 
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FIGURE 6-10 
18-point Arial 


T lP 


To specify a size for 
the body text, use 
BODY as the selector. 
This rule sets the text 
to 14-point Arial: 
<STYLE TYPE= 
"text/css"> 

BODY 
{FONT-FAMILY: 


ARIAL; FONT-SIZE: 


14pt} 

</STYLE> 
Remember to sepa- 
rate multiple property 
statements with 
semicolons. 


E] A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 
| File Edit View Favorites Tools Help 
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It was a soft, reposeful summer landscape, as 
lovely as a dream, and as lonesome as 
Sunday. The air was full of the smell of flowers, 
and the buzzing of insects, and the twittering of 
birds, and there were no people, no wagons, 
there was no stir of life, nothing going on. 


lÆ] Done ll 


| 5} My Computer 


Specifying Font Weight 
CSS allows either a numerical or descriptive value for font weight. Commonly 
used descriptive values include: 


Normal 
e Bold 
e Bolder 
e Lighter 


Test values other than bold. Not all weights are available for all typefaces. 
Experiment to determine what works. 
The following rule shows the addition of the font weight property to the rule: 


<STYLE TYPE="text/css"> 

BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; 
FONT-WEIGHT: BOLD} 

</STYLE> 


Figure 6-11 shows the result of this rule. 


FIGURE 6-11 
18-point Arial bold 
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44 A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| File Edit View Favorites Tools Help 


| @Back ~ > - @ fo} | Qsearch (Favorites CBHistoy | & BF ~ 


| Address €] X 


It was a soft, reposeful summer landscape, 
as lovely as a dream, and as lonesome as 
Sunday. The air was full of the smell of 
flowers, and the buzzing of insects, and the 
twittering of birds, and there were no 
people, no wagons, there was no stir of life, 
nothing going on. 


[E] Done {| [E My Computer 


Specifying Line Height 

CSS allows you to specify either a percentage or absolute value for the line 
height, commonly called leading. The percentage is based on the font size. Setting 
the value to 150% with a 10-point font size results in a line height of 15 points. 
For absolute values, use any of the standard CSS measurement units. The follow- 
ing rule sets the line height to 30 points: 


<STYLE TYPE="text/css"> 

BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; 
FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt} 

</STYLE> 


Figure 6-12 shows the adjustment in line height. 
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FIGURE 6-12 


18-point Arial bold with 
30-point leading 


TIP 


The font property is a 
shortcut that lets you 
specify the most com- 
mon font properties in 
a single statement. You 
must use the following 
syntax in the exact 
order, and always 
include a font size: 
Selector {FONT: 
FONT-WEIGHT FONT- 
SIZE/LINE-HEIGHT 
FONT-FAMILY} 

For example, you can 
abbreviate the follow- 
ing rule: 

<STYLE 
TYPE="text/css"> 
BODY {FONT- 
WEIGHT: BOLD; 
FONT-SIZE: 18pt; 
LINE-HEIGHT: 
30pt; 
FONT-FAMILY: 
ARIAL} 

</STYLE> 

to the following 
shorter version: 
<STYLE 
TYPE="text/css"> 
{FONT: BOLD 
18pt/30pt ARIAL} 
</STYLE> 


44 A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 
| File Edit View Favorites Tools Help 
| @Back - > - @ to} | QSearch (Favorites CBHistoy | SH BY ~ 


| Address je ~] @ Go 


It was a soft, reposeful summer landscape, 
as lovely as a dream, and as lonesome as 
Sunday. The air was full of the smell of 
flowers, and the buzzing of insects, and the 
twittering of birds, and there were no 
people, no wagons, there was no stir of life, 


nothing going on. 


\ I 


Eal Done [| 
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Specifying Letter Spacing 

Kerning is the printer’s term for adjusting the white space between letters. 

To adjust kerning use the letter spacing property. Use any of the CSS measure- 
ment units for the value. The following rule sets the letter spacing to 2 points. 


<STYLE TYPE="text/css"> 

BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; 
FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER-SPACING: 2pt} 
</STYLE> 


Figure 6-13 shows the 2-point spacing between letters. 


Specifying Text Indents 

Use the text indent property to set the amount of indentation for the first line 
of text in an element, such as a paragraph. Use any of the CSS measurement 
units for the value. Use a negative value to set a hanging indent. The following 
rule sets an indent of 24 points. 


<STYLE TYPE="text/css"> 

BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; 
FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER- 
SPACING: 2pt; 
TEXT-INDENT: 
</STYLE> 


24pt} 


Figure 6-14 shows the result of the text indent property. 


FIGURE 6-13 


2 points of letter 
spacing 


FIGURE 6-14 
18-point text indent 


TIP 


You can create a 
hanging indent by 
using a negative value 
in the text indent 
property. For example, 
the following code 
creates a paragraph 
with a 12-point hang- 
ing indent: 

<STYLE 
TYPE="text/css"> 
P {TEXT-INDENT: 
-12pt} 

</STYLE> 
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44 A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| File Edit View Favorites Tools Help 


| Back ~- > - @ fo} | Qsearch (Favorites CBHistoy | & BF ~ 
| Address £] 


It was a soft, reposeful summer 
landscape, as lovely as a dream, 
and as lonesome as Sunday. The 
air was full of the smell of flowers, 
and the buzzing of insects, and the 
twittering of birds, and there were 
no people, no wagons, there was 
no stir of life, nothing going on. 


\@] Done =] 


| My Computer 


4¥ A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| File Edit View Favorites Tools Help 
| Back ~ > - @ fo} | Qsearch (Favorites CBHistoy | & W ~ 
| Address [£] 


It was a soft, reposeful summer 


landscape, as lovely as a dream, 
and as lonesome as Sunday. The 
air was full of the smell of flowers, 
and the buzzing of insects, and the 
twittering of birds, and there were 
no people, no wagons, there was 
no stir of life, nothing going on. 


lÆ] Done m] 


| 53 My Computer 
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FIGURE 6-15 


Reversed text—white 
on blue 


Specifying Color 
The COLOR attribute sets the color of the text in an element. You also can use 
the COLOR attribute to set the color of borders. You can use any one of the six- 
teen predefined colors, or specify a hexadecimal value. (See Chapter 7 for more 
information on hexadecimal color values.) The following rule sets the text color 
to blue: 


<STYLE TYPE="text/css"> 
H1 {COLOR: BLUE} 
</STYLE> 


Specifying Text Background Color 
You can set the background color—the color behind the text—for any element. 
Use the following syntax: 


<STYLE TYPE="text/css"> 
H2 {COLOR: WHITE; BACKGROUND-COLOR: BLUE} 
</STYLE> 


The result of this rule is a white text on a blue background, often called a 
reverse in printing jargon. Figure 6-15 shows an <H2> element with this style. 


AAA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| Ele Edt View Favorites Tools Help Ea 
| Back - > - @ (| Seach fa Favorites CBHistoy | S BV ~ 
| Address [Æ] x] @Go 


Reversed text fom A Connecticut Yankee in King Arthur's Court by Mark Twain 


Chapter 1 
The Tale of the Lost Land: Camelot 


"CAMELOT -- Camelot," said I to myself. "I don't seem to remember hearing of it before. Name 
ofthe asylum, likely." 


It was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. The 
air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, and there 
were no people, no wagons, there was no stir of life, nothing going on. The road was mainly a 
winding path with hoof-prints in it, and now and then a faint trace of wheels on either side in the 
grass -- wheels that apparently had a tire as broad as one's hand. 


I 
Z 


\@] Done {| [E My Computer 
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SPECIFYING BLOCK-LEVEL SPACE VALUES 
Cascading Style Sheets allow you to specify property values for the space 
around block-level elements. You can set the following three properties: 


e Padding: The area between the text and border 
e Border: The area separating the padding and margin 
e Margin: The area outside the border 


Figure 6-16 shows these three areas around a block-level text element. 


FIGURE 6-16 4¥ A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 
White space areas | Eie Edit View Favorites Tools Help | 
around po | @Back ~- > - & (| Search f Favorites CBHistoy | & BY ~ 
Address [42 Margin (dashed line 
does not display) 


cr | 
i lt was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome I 


Vas Sunday. The air was full of the smell of flowers, and the buzzing of insects, and I 
l 


I the twittering of birds, and there were no people, no wagons, there was no stir of life, 1 
I 1 
p nothing going on. The road was mainly a winding path with hoof-prints in it, and now 4 


: 3 oe 1 
; and then a faint trace of wheels on either side in the grass -- wheels that apparently , 


Text block (dashed 
line does not display) 


| | |) My Computer 


Specifying Text Padding 

You can specify the padding amount with any CSS measurement unit. Use the 
PADDING property to set the padding on all four sides, or set individual mar- 
gins with the following settings: 


e PADDING-TOP 

e PADDING-BOTTOM 
e PADDING-LEFT 

e PADDING-RIGHT 


The following rule sets the left and right padding to 24 points: 


<STYLE TYPE="text/css"> 
P {PADDING-LEFT: 24pt; PADDING-RIGHT: 24pt} 
</STYLE> 
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Specifying Text Margins 

You can specify the margin amount with any CSS measurement unit. Use the 
MARGIN attribute to set the text margin on all four sides, or set individual mar- 
gins with the following settings: 


e MARGIN-TOP 

e MARGIN -BOTTOM 
e MARGIN -LEFT 

e MARGIN -RIGHT 


The following rule sets the margin to 30 pixels: 


<STYLE TYPE="text/css"> 
P {MARGIN: 30px} 
</STYLE> 


Specifying Text Borders 

CSS offers a wide variety of border options including width, style, and color. You 
can use the BORDER shortcut property to specify multiple border properties at 
one time. Use the following syntax: 


{BORDER: BORDER-STYLE BORDER-WIDTH BORDER-COLOR} 


For example, the following code sets a solid, 2-point red border around 
the text. 


<STYLE TYPE="text/css"> 
{BORDER: SOLID 2pt RED} 
</STYLE> 


Coding Easy-to-Read Rules 

To the browser, it does not matter how you space and indent your style rules, 
as long as the syntax is correct. Many HTML authors indent their style rules to 
make them easier to read and maintain. It is possible to express the following 
single-line style rule in a much neater fashion: 


<STYLE TYPE="text/css"> 

P {FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF; FONT- 
SIZE: 10pt; LINE-HEIGHT: 20pt; MARGIN-LEFT: 20px; 
MARGIN-RIGHT: 20px} 

</STYLE> 


The same rule is easier to read using indenting and alignment: 


<STYLE TYPE="text/css"> 
P { 
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF; 
FONT-SIZE: 10pt; 
LINE-HEIGHT: 20pt; 
MARGIN-LEFT: 20px; 
MARGIN-RIGHT: 20px 


} 
</STYLE> 
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STYLING WITH CSS 


FIGURE 6-17 


Standard HTML 
text display 


In this section you will see how to set up a style sheet for a document using a 
variety of font properties. For example, your job is to develop an online library 
of public domain texts. You would want to set up a style sheet that you could 
apply to all the documents in the collection. In this example, the public domain 
content is the first chapter from Mark Twain’s A Connecticut Yankee in King 
Arthur’s Court. Figure 6-17 shows the page coded with standard HTML. The 
code for the page follows the figure. 


ABA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| Ele Edt View Favorites Tools Help | 
| back ~ >- Q fo} | QSearch (Favorites Bristoy | BH BF ~ 
| Address | x] Ge | 


from A Connecticut Yankee in King Arthur's Court by Mark Twain 


Chapter 1 
The Tale of the Lost Land: Camelot 


"CAMELOT -- Camelot," said Ito myself "I don't seem to remember hearing of it before. Name 
of the asylum, likely." 


It was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. The 
air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, and there 
were no people, no wagons, there was no stir of life, nothing going on. The road was mainly a 
winding path with hoof-pnints in it, and now and then a faint trace of wheels on either side in the 
grass -- wheels that apparently had a tire as broad as one's hand. 


[Æ] Done | | |) My Computer y 


<HTML> 

<HEAD> 

<TITLE>A Connecticut Yankee in King Arthur's Court by 
Mark Twain</TITLE> 

</HEAD> 

<BODY> 

<DIV ALIGN=RIGHT> 

from <I>A Connecticut Yankee in King Arthur's Court</I> by 
Mark Twain</DIV> 

<HR> 

<H2>Chapter 1</H2> 

<H3>The Tale of the Lost Land: Camelot</H3> 

<P> 
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"CAMELOT — 

Camelot," said I to myself. "I don't seem to remember 
hearing of it before. Name of the asylum, likely." 

</P> 

<P> 

It was a soft, reposeful summer landscape, as lovely as a 
dream, and as lonesome as Sunday. The air was full of the 
smell of flowers, and the buzzing of insects, and the 
twittering of birds, and there were no people, no wag- 
ons, there was no stir of life, nothing going on. The 
road was mainly a winding path with hoof-prints in it, 
and now and then a faint trace of wheels on either side in 
the grass — wheels that apparently had a tire as broad as 
one's hand. 

</P> 

</BODY> 

</HTML> 


SETTING UP DOCUMENT DIVISIONS 

To set up a style sheet, start by determining the logical divisions for the docu- 
ment. Each division has its own unique type characteristics that can be stated 
as style rules. Figure 6-18 shows the document divisions you could use for this 
type of document. 


FIGURE 6-18 


Logical document 
divisions 


Chapter number 
Chapter title 


Standard paragraph 


FA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| Ele Edt View Favorites Tools Help Ea 
| back ~ > -0 G| QLlsearch [Favorites CBHistoy | B BF ~ 
| Address X @ Go 


Book title from A Connecticut Yankee in King Arthur's Court by Mark Twain 
Chapter 1 Credit > 


The Tale of the Lost Land: Camelot 


"CAMELOT -- Camelot," said I to myself "I don't seem to remember hearing of it before. Name 
of the asylum, likely." 


It was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. The 
air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, and there 
were no people, no wagons, there was no stir of life, nothing going on. The road was mainly a 
winding path with hoof-prints in it, and now and then a faint trace of wheels on either side in the 
grass -- wheels that apparently had a tire as broad as one's hand. 


[Æ] Done | | |.) My Computer 7 


FIGURE 6-19 


Standard 
paragraph style 


e Sans-serif font 
e 10-point text 

e 20-point leading 
e 20-pixel left and 
right margins 


Web Typography // 163 


Using style sheets, you can create a different set of style rules for each divi- 
sion. For this example, you can build the style sheet internally in the <STYLE> 
section. Later, you can move the rules to an external style sheet for use with 
multiple documents. 


STYLING THE STANDARD PARAGRAPH 
You can set up the style for the most basic content division—the standard para- 
graph. Here are the style requirements for the paragraph: 


e Sans-serif font 
e 10-point type with 20-point leading 
e 20-pixel left and right margins 


Select the <P> element and state the style rules: 


P { 
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF; 
FONT-SIZE: 10pt; 

LINE-HEIGHT: 20pt; 
MARGIN-LEFT: 20px; 
MARGIN-RIGHT: 20px 


Place all style rules within the <STYLE> element in the document’s 
<HEAD> section. Figure 6-19 shows the results of the style changes to the <P> 
element. 


AVA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 
| File Edit View Favorites Tools Help 


| Bak- >- Q G| QSeach (Favorites CBristoy | SH W ~ 
Address 


from A Connecticut Yankee in King Arthur's Court by Mark Twain 


Chapter 1 


The Tale of the Lost Land: Camelot 


"CAMELOT -- Camelot," said | to myself. "I dont seem to remember hearing of it before. Name 


of the asylum, likely." 


lt was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. 
The air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, 


and there were no people, no wagons, there was no stir of life, nothing going on. The road was 


mainly a winding path with hoofprints in it, and now and then a faint trace of wheels on either 


side in the arass -- wheels that annarently had a tire as broad as one's hand. z 
| | [E My Computer y 
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STYLING THE CHAPTER NUMBER 
Set up a class name for the chapter number. Call this class CHAPNUMBER. Here 
are the style characteristics for the class: 


e Default browser font 

e White text on a gray background 

e 24-point bold text with 36-point leading 
e 20-pixel left margin 


Specify the class name and state the rule: 


- CHAPNUMBER 
{ 
FONT-SIZE: 24pt; 
LINE-HEIGHT: 36pt; 
FONT-WEIGHT: BOLD 
MARGIN-LEFT: 20px; 
BACKGROUND-COLOR: GRAY; 
COLOR: WHITE; 
} 


Change the element that contains the chapter number to apply the new 
style.The code currently looks like this: 


<H2>Chapter 1</H2> 


Replace the <H2> with <DIV>, and specify the CLASS attribute value as 
CHAPNUMBER: 


<DIV CLASS="CHAPNUMBER">Chapter 1</DIV> 


Figure 6-20 shows the results of the new style. 


STYLING THE CHAPTER TITLE 
Call the chapter title class CHAPTITLE. Here are the style characteristics: 


e Default browser font 

e 18-point bold text with 30-point leading 
e 2 points of spacing between each letter 
e 20-pixel left margin 


Specify the class name and state the rule: 


-CHAPTITLE 
{ 
FONT-SIZE: 18pt; 
LINE-HEIGHT: 30pt; 
FONT-WEIGHT: BOLD; 
LETTER-SPACING: 2pt 
MARGIN-LEFT: 20px; 
} 
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Apply the style in the code: 


<DIV CLASS="CHAPTITLE">The Tale of the Lost Land: 


Camelot</DIV> 
FIGURE 6-20 22 A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 
Chapter number style | File Edit View Favorites Tools Help 


| @Back ~ > - @ E A| QSearch f Favorites BHistoy | SH BF ~ 


COS 


from A Connecticut Yankee in King Arthur's Court by Mark Twain 


Chapter 1 


The Tale ofthe Lost Land: Camelot 


AMELOT -- Camelot," said | to myself. "I dont seem to remember hearing of it before. Name 


e Default browser font 
e White text on a 
gray background 
e 24-point bold text 
with 36-point leading 
e 20-pixel left margin 


a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. 


é air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, 


and there were no people, no wagons, there was no stir of life, nothing going on. The road was 


mainly a winding path with hoofprints in it, and now and then a faint trace of wheels on either 


side in the grass -- wheels that apparently had a tire as broad as one's hand. z 


\@] Done | | [E My Computer 7 


Figure 6-21 shows the results of the new style. 


FIGURE 6-21 
Chapter title style 


E] A Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer f=] E3 
| File Edt View Favorites Tools Help i 


Back = > + @ E | Qseach f Favorites Ehistoy | & BF ~ 
e Default browser font 


e 18-point bold text with 
30-point leading 

e 2 points of spacing 
between each letter 

e 20-pixel left margin 


onnecticut Yankee in King Arthur's Court by Mark Twain 


The Tale of the Lost Land: Camelot 


"CAMELOT -- Camelot," said | to myself. "I dont seem to remember hearing of it before. 


Name ofthe asylum, likely." 


it was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as ira 


yd | (a yComputer A 
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STYLING THE CREDIT AND BOOK TITLE 

Finish the document style sheet by setting up classes for the credit and book 
title. The credit is a block element and, therefore, a <DIV>. Here are the style 
requirements: 


Default font 

10-point type on 20-point leading 
Right-aligned 

Black bottom border rule 
20-pixel left margin 


State the style rule for class CREDIT: 


DIV.CREDIT { 
TEXT-ALIGN: RIGHT; 
FONT-SIZE: l10pt; 
BORDER-BOTTOM: SOLID 1px BLACK; 
LINE-HEIGHT: 20pt; 
MARGIN-LEFT: 20px; 
} 


Apply the style: 


<DIV CLASS="CREDIT">from A Connecticut Yankee in King 
Arthur's Court by Mark Twain</DIV> 


The book title is contained within a line of text. Use the inline <SPAN> ele- 


ment to apply a style to the book title. First, set up the style rule which makes 
the text italic: 


SPAN.BOOKTITLE {FONT-STYLE: ITALIC} 
Then apply the class using <SPAN>: 


<DIV CLASS="CREDIT">from <SPAN CLASS="BOOKTITLE">A 
Connecticut Yankee in King Arthur's Court</SPAN> by Mark 
Twain</DIV> 


Figure 6-22 shows the results of the final style changes—the finished styled 


document. 


FIGURE 6-22 


Credit and book 
title style 
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AAA Connecticut Yankee in King Arthur's Court by Mark Twain - Microsoft Internet Explorer 


| File Edit View Favorites Tools Help 


| @Back ~ > - @ R | QSeach (Favorites CBristoy | & HF ~ 
Book title 


in italics 


e Default font 
The Tale of the Lost Land: Cay e 10-point type with 
20-point leading 
e Right-aligned 
"CAMELOT -- Camelot," said | to myself. "I dont seem to re e Black bottom border rule 


of the asylum, likely." e 20-pixel left margin 


lt was a soft, reposeful summer landscape, as lovely as a dream, and as lonesome as Sunday. 
The air was full of the smell of flowers, and the buzzing of insects, and the twittering of birds, 


and there were no people, no wagons, there was no stir of life, nothing going on. The road was 


mainly aswindine nath with hoof-nrints in it and now and then a faint trace nf wheels on either = 
Done = B My Computer YW 


The code for the entire document follows: 


<HTML> 

<HEAD> 

<TITLE>A Connecticut Yankee in King Arthur's Court by 

Mark Twain</TITLE> 

</HEAD> 

<STYLE TYPE="text/css"> 

P { 
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF; 
FONT-SIZE: 10pt; 
LINE-HEIGHT: 20pt; 
MARGIN-LEFT: 20px; 
MARGIN-RIGHT: 20px 
} 

DIV.CHAPNUMBER 
{ 
FONT-SIZE: 24pt; 
LINE-HEIGHT: 30pt; 
MARGIN-LEFT: 20px; 
BACKGROUND-COLOR: GRAY; 
COLOR: WHITE; 
FONT-WEIGHT: BOLD 
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} 
DIV.CHAPTITLE 


{ 

FONT-SIZE: 18pt; 

LINE-HEIGHT: 30pt; 

FONT-WEIGHT: BOLD; 

MARGIN-LEFT: 20px; 

LETTER-SPACING: 2pt 

} 
DIV.CREDIT 

{ 

TEXT-ALIGN: RIGHT; 

FONT-SIZE: 10pt; 

LINE-HEIGHT: 20pt; 

BORDER-BOTTOM: SOLID THIN BLACK; 

MARGIN-LEFT: 20px; 

} 
SPAN.BOOKTITLE {FONT-STYLE: ITALIC} 
</STYLE> 
<BODY> 
<DIV CLASS="CREDIT">from <SPAN CLASS="BOOKTITLE">A 
Connecticut Yankee in King Arthur's Court</SPAN> by Mark 
Twain</DIV> 
<DIV CLASS="CHAPNUMBER">Chapter 1</DIV> 
<DIV CLASS="CHAPTITLE">The Tale of the Lost Land: 
Camelot</DIV> 
<P> 
"CAMELOT — Camelot," said I to myself. "I don't seem to 
remember hearing of it before. Name of the asylum, 
likely." </P> 
<P> 
It was a soft, reposeful summer landscape, as lovely as a 
dream, and as lonesome as Sunday. The air was full of the 
smell of flowers, and the buzzing of insects, and the 
twittering of birds, and there were no people, no wag- 
ons, there was no stir of life, nothing going on. The road 
was mainly a winding path with hoof-prints in it, and now 
and then a faint trace of wheels on either side in the 
grass — wheels that apparently had a tire as broad as 
one's hand. 
</P> 
</BODY> 
</HTML> 
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SUMMARY & REVIEW 


Use type to communicate information structure. Be sparing with your type choices; use 
fonts consistently, and design for legibility. 

Remember that HTML text downloads faster than graphics-based text. Use HTML text 
whenever possible. 

Use browser-safe fonts that will appear as consistently as possible across operating 
systems. 

Limit the use of the <FONT> element because it is deprecated in HTML 4.0. 
Experiment and consider implementing with Cascading Style Sheets (CSS). CSS even- 
tually will replace the <FONT> element and offer more control and ease of use. 

If you use CSS, standardize your styles by building external style sheets and linking 
multiple documents to them. 

Test your work. Different browsers and computing platforms render text in 

different sizes. 


REVIEW QUESTIONS 


5 OOS oT Pe oa N a 


OOo FrwWN > oO 


What is the default browser font? 

What does the browser do if you specify a font that is not stored on a user's computer? 
What are two drawbacks to graphics-based text? 

What three attributes can you use with the <FONT> element? 

Why would you want to limit use of the <FONT> element? 

What are the two ways to set size with the <FONT> element? 

Why is FACE="ARIAL, HELVETICA” a common font substitution string? 

Name the two parts of a style rule. 

Name the two parts of a property declaration. 

What element contains the style rules? 

How do you override a style for a specific element? 

What is the common filename extension for style sheets? 

Name three ways to select elements. 

Name two elements designed for use with style sheets. 

Write a rule specifying that <P> elements appear as 14-point text with 20-point leading. 
Write a rule specifying that <I> elements display red only when they appear within <P> 
elements. 

Write a rule defining a division named NOTE. Specify 12-point bold Arial text on a yel- 

low background. 

What three white space areas can you affect with style rules? 

Write a style rule to create a white on black reverse <H1> heading. 

Write a style rule for a <P> element with a 24-point hanging indent and a 30-pixel mar- 
gin on the left and right sides. 


NO // Chapter 6 


PROJECTS 


1. 


Convert an existing HTML document to Cascading Style Sheets. 

a. Build styles using the existing standard HTML elements in the file. 

b. Test the work in multiple browsers to verify that all styles are portable. 

c. Remove the files and place them in an external style sheet. 

d. Link the HTML file to the style sheet. Test to make sure the file displays properly. 

Convert an existing document to Cascading Style Sheets. 

a. Decide on logical divisions for the document. 

b. Give the divisions class names. 

c. Write style rules for the division. 

d. Apply the styles to the divisions using <DIV> or <SPAN>. 

e. Test your work. 

Convert an existing document to Cascading Style Sheets. Test your work in an older 

browser, such as Netscape Navigator 3.0, which does not support style sheets. You 

can download older versions of browsers from www.browsers.com. 

Browse the Web for examples of good typography. Write a short design critique of why 

the type works effectively on the Web sites you find. 

Browse the Web for examples of poor typography. Write a short design critique of why 

the type is confusing or misleading to the user. 

Mock up a page for testing body text fonts. Try a variety of fonts at different resolu- 

tions to determine which is the most readable. Test your work on a variety of subjects 

(friends, family, coworkers) to see if they agree with your choices. 

You will find the example files from this chapter on the Principles of Web Design 

Companion Web site. 

a. Open the file twain.htm in your browser. Save the file to your hard drive. 

b. Re-create the style rule demonstration in the “Styling with CSS” section of this 
chapter after Figure 6-22. 

c. Test the finished file's compatibility by viewing it in multiple browsers. 


CASE STUDY 


Use Cascading Style Sheets for the case study project. Design the type hierarchy for the infor- 
mation levels in your Web site. Create a type specification page in HTML that shows examples 
of the different typefaces and sizes and where each of them will be used. 


Determine the body copy typeface and size for your Web site. Mock up a couple of test 


pages with some content. Test for legibility of your text. Try different leading, padding, and 
margins to see how this affects the clarity of the text. 


Once you have decided on your typefaces, start to add actual content to the different 


pages of the Web site using the styles you have developed to display the text. 


